<script setup lang="ts">
import { computed, reactive, watch } from 'vue'
// import { navigateToUrl } from 'single-spa'
import { useStore } from 'stores/store'
import { /* useRoute,  */useRouter } from 'vue-router'
import { i18n } from 'boot/i18n'

// const props = defineProps({
//   foo: {
//     type: String as PropType<'bar'>,
//     required: false,
//     default: ''
//   }
// })
// const emits = defineEmits(['change', 'delete'])

const { tc } = i18n.global
const store = useStore()
// const route = useRoute()
const router = useRouter()

const model = reactive({
  input: '',

  models: computed(
    () => Object.values(store.tables.modelTable.byId)
      .filter(item => item.is_active)
  ),
  selectionModel: ''
})

// 选择默认model
const chooseModel = () => {
  model.selectionModel = model.models[0].name || ''
}

if (model.models.length > 0) {
  // console.log('setup choose service')
  chooseModel()
} else {
  watch(store.tables.modelTable, () => {
    if (store.tables.modelTable.status !== 'loading') {
      chooseModel()
    }
  })
}

const sendNewMsg = () => {
  // console.log(model.input)
  // create新对话，得到chat id
  // list chat id，更新layout左侧列表 （因此chat list table应为全局数据，放入store中）
  // 带着id跳转该chat，并显示详情

  // 临时开发,带着init message跳转到
  router.push({
    // path: '/my/chat/1',
    name: 'chatDetail',
    params: {
      chatId: 1,
      initMessage: model.input,
      initModel: model.selectionModel
    }
  })
}

</script>

<template>
  <!--  <q-scroll-area style="height: calc(100vh - 60px);">-->
  <div class="column no-wrap scroll" style="height: calc(100vh - 60px);">
    <!-- 主要内容区域   -->
    <div class="col column no-wrap full-height items-center justify-center">
      <div class="col-auto row items-center">
        <q-icon class="col-auto" size="60px" color="primary">
          <img :src="require('assets/svg/icon_deepseek_color.svg')"/>
        </q-icon>
        <div class="col-auto text-h5">
          我是 DeepSeek，很高兴见到你！
        </div>
      </div>
      <div class="col-auto row items-center q-mb-md text-grey-9">
        我可以帮你写代码、读文件、写作各种创意内容，请把你的任务交给我吧~
      </div>
      <div class="col-auto row full-width justify-center" style="padding-bottom: 10vh;">
        <div class="col column input-frame">
          <q-input class="col full-width"
                   v-model="model.input"
                   :placeholder="tc('给 DeepSeek 发送消息')"
                   autogrow
                   dense
                   borderless
                   @keydown.enter.prevent="sendNewMsg()"
          />
          <div class="col-auto row">
            <div class="col row">
              <q-btn v-for="(item, index) in model.models" :key="index"
                     class="text-caption q-mr-xs"
                     :class="model.selectionModel === item?.name ? 'button-selected' : 'button-unselected'"
                     :ripple="false"
                     rounded
                     unelevated dense
                     no-caps
                     @click="model.selectionModel = item?.name">
                {{ item.name }}
              </q-btn>
            </div>
            <div class="col-auto row">
              <q-btn class="bg-grey-5 text-white" icon="arrow_upward" :ripple="false" flat round dense no-caps
                     @click="sendNewMsg()"/>
            </div>

          </div>
        </div>
      </div>

    </div>
    <!-- 底部提示语   -->
    <div class="col-auto row items-center justify-center text-grey">
      {{ tc('内容由 AI 生成，请仔细甄别') }}
    </div>
  </div>
  <!--  </q-scroll-area>-->
</template>

<style lang="scss" scoped>
.button-selected {
  background-color: #DBEAFE;
  color: #1976D2;
}

.button-unselected {
  background-color: white;
  color: black;
}

.input-frame {
  max-width: 600px;
  min-height: 110px;
  padding: 10px;
  background-color: rgb(243 244 246);
  box-shadow: 0px 0px 0px .5px #dce0e9;
  border-radius: 24px;
}

</style>
